<!--
 * @Description: 登录注册
 * @Author:  zhangweigang
 * @Date: 2021-02-14 20:08:05
 * @LastEditTime: 2021-03-06 16:51:09
 * @LastEditors:  
-->
<template>
  <!-- 背景轮播图 -->
  <swiper-back>
    <div class="main">
      <div v-if="bool">
        <login-info ref></login-info>
      </div>
      <div v-else>
        <register-info ref></register-info>
      </div>
      <div class="reg_btn">
        <button ref="doClick" class="change_btn" @click="getUrl">注册</button>
      </div>
    </div>
  </swiper-back>
</template>

<script>
import SwiperBack from "@/components/common/swiper.vue";
import LoginInfo from "@/views/login/Login.vue";
import RegisterInfo from "@/views/register/Register.vue";
export default {
  name: "Mian",
  data() {
    return {
      bool: true,
    };
  },
  components: { SwiperBack, LoginInfo, RegisterInfo },
  methods: {
    // 路径切换
    getUrl() {
      this.bool = this.bool ? false : true;
      if (this.bool) {
        this.$refs.doClick.innerHTML = "注册";
      } else {
        this.$refs.doClick.innerHTML = "登录";
      }
      return this.bool;
    },
  },
};
</script>

<style lang="less" scoped>
html,
body {
  position: relative;
}
.main {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 99;
  transform: translate(-50%, -50%);
  width: 500px;
  height: auto;
  padding: 20px 30px;
  background-color: #fff;
  .reg_btn {
    text-align: right;
    font-size: 15px;
    .change_btn {
      padding: 5px 20px;
      color: #333;
      background-color: #fff;
      border: 1px solid #6f6f6f;
    }
  }
  .login {
    height: 400px;
    .login_form {
      padding: 70px 0 0 100px;
    }
  }
  .el-input {
    width: 70%;
  }
  .el-form-item__error {
    font-size: 18px !important;
  }
}
</style>